<template>
    <div class="subpage my-cart">
        <My-head :back="false" :carthave="true" title="购物车"></My-head>

        <div v-if="userInfo">
            <div class="w-all" v-if="cartLists.length">
                <p class="w-top">
                    <span class="w-book">蔚蓝书店</span>
                </p>
                <ul class="w-two">
                    <li v-for="(l, i) in cartLists" :key="i">
                        <router-link :to="{ name: 'bookDetail', params: { skuId: l.skuId }, query: { name: l.bookName } }">
                            <div class="w-ye">
                            <div class="w-zuo">
                                    <p>
                                        <label for="dian" @click.stop="dianMe">
                                            <input class="w-in" id="dian" type="checkbox" v-model="l.check">
                                        </label>
                                    </p>
                                    <p class="w-left">
                                        <img :src="'https://img.welan.com/s/'+l.bookImg" alt="">
                                    </p>
                            </div>
                                <div class="w-right">
                                    <div class="w-up">
                                        <p class="w-name"> {{ l.bookName }} </p>
                                        <div class="w-ce">
                                            <button class="w-db" @click.stop.prevent="reduceCart(l.skuId)" :disabled="(l.bookNumber) == 1" >-</button>
                                            <input type="text" v-model.number="l.bookNumber">
                                            <!-- <span>{{ l.bookNumber }}</span> -->
                                            <button @click.stop.prevent="addCart(l.skuId)">+</button>
                                        </div>
                                    </div>
                                    <div class="w-price">
                                        <span>￥</span>
                                        <input class="w-pi" type="number" min="0" v-model.number="l.bookPrice">
                                        <!-- <p> ￥{{ (l.detailsBook.sku.wlPrice).toFixed(2) }} </p> -->
                                    </div>
                                </div>
                            </div>

                            <div class="w-delete">
                                <!-- <p @click="cartLists.splice(i , 1)">删除</p> -->
                                <p @click="deleteBook(l.skuId)">删除</p>
                            </div>
                        </router-link>
                    </li>
                </ul>

                <van-submit-bar :price="checkAmount" button-text="提交订单" @submit="onSubmit">
                    <p class="w-jie">
                        <label for="all">
                            <input class="w-in" type="checkbox" name="" id="all" v-model="all">
                            <span>全选</span>
                        </label>
                        <!-- <button class="w-bu" @click="delCheck">删除选中</button> -->
                    </p>
                </van-submit-bar>
            </div>

            <div v-else>
                <van-empty
                class="custom-image"
                image="https://m.welan.com/static/img/shoppingCartDefault.2d9bb267.png"
                description="你的书包空空如也，去选一本书吧~ "
                />
            </div>

        </div>

        <div v-else>
            <van-empty
            class="custom-image"
            image="https://m.welan.com/static/img/shoppingCartDefault.2d9bb267.png"
            description="你的书包空空如也，去选一本书吧~ "
            />
        </div>

        <Jing-list :recommendList="recommendList"></Jing-list>


        
    </div>
</template>

<script>
export default {
    data() {
        return {
            checked: false,
            cartLists: [],
            checkAmount: 0,
            count:1,
            // flag: false
        }
    },
    computed: {
        all: {
            get() {   // 取值
                // let flag = true;     //方法1
                // this.goods.forEach(item => {
                //     if (!item.check) flag = false;
                // })
                // return flag;

                // 方法2
                return this.cartLists.every(item => item.check);
            },
            set(v) {
                // 监听主动修改
                // console.log(v);
                // this.goods = this.goods.map(item => {
                //     // item.check = v;
                //     // return item;
                //     return {...item , check : v};
                // })

                this.cartLists.forEach((item , index) => {
                    this.$set(this.cartLists , index , {...item , check : v})
                })
            },
            checkCount() {
                let count = 0 
                this.cartLists.forEach( item => {
                    count += item.check ? item.count : 0;
                })
                return count;
            }
        }
    },
     watch:{
        cartLists:{
            deep:true,  // 深度监听，监听深层次改变
            handler(v) {
                console.log(v);
                // this.total = 0;
                // this.amount = 0;
                // this.checkTotal = 0;
                this.checkAmount = 0;
                v.forEach( item => {
                    // this.total += item.count;
                    // this.amount += item.price * item.count;
                    // this.checkTotal += item.check ? item.count : 0;
                    this.checkAmount += item.check ? (item.bookNumber * item.bookPrice) * 100 : 0;
                    // this.bookNumber = item.bookNumber
                })
            }
        }
    },

    methods: {
        deleteBook(skuId) {
            this.$dialog.confirm({
                title: '温馨提示',
                message: '亲,您确定要删除该商品吗?'
            }).then(() => {
                this.$ajax.getCartOne({
                    skuId: skuId,
                    phone: this.userInfo.phone
                }).then(res => {
                    this.$ajax.removeCartOne(res[0].id)
                    .then(data => {
                        this.showSuccessMsg('你成功删除了该商品')
                    })
                })
            })


            // this.$dialog.confirm({
            //     title: '温馨提示',
            //     message: '亲,您确定要删除该商品吗?'
            // })
            // this.$ajax.getCartOne({
            //     skuId: skuId,
            //     phone: this.userInfo.phone
            // })
            // .then(res => {
            //     this.$ajax.removeCartOne(res[0].id)
            //     .then(data => {
            //         this.showSuccessMsg('你删除了该商品')
            //     })
            // })
        },
        dianMe() {
            // this.$ajax.getCartOne({
            //     skuId: skuId,
            //     phone: this.userInfo.phone
            // }).then(res => {
            // })
        },
        CheckItem:function(item){
            item.state = !item.state;
            console.log(this.items);
        },
        getCartList() {
            this.$ajax.getCartOne({

            }).then((res) => {
                console.log(res);
                // if(res.length > 0) {
                    this.cartLists = res
                    // this.flag = true
                // } else {
                //     this.flag = false
                // }
            })
        },
         delCheck() {
            // 选中true删除  filter true 是要保留下来  
            this.cartLists = this.cartLists.filter(item => !item.check)
        },
        addCart(skuId) {
            this.$ajax.getCartOne({
                skuId: skuId,
                phone: this.userInfo.phone
            })
            .then(res => {
                // 删除 
                // id 不是skuId 带这条记录的id 
                this.$ajax.updateBookNumber(res[0].id, {
                    bookNumber: res[0].bookNumber+1,
                })
                .then(data => {
                    // this.getCartCount()
                    this.$router.go(0)
                    // this.$router.replace({ name: 'blank' })
                    //  this.$toast('你取消了点赞') // 有问题
                    this.showSuccessMsg('您增加了该商品数量')
                })
            })
        },
        reduceCart(skuId) {
            this.$ajax.getCartOne({
                skuId: skuId,
                phone: this.userInfo.phone
            })
            .then(res => {
                // 删除 
                // id 不是skuId 带这条记录的id 
                this.$ajax.updateBookNumber(res[0].id, {
                    bookNumber: res[0].bookNumber-1,
                })
                .then(data => {
                    // this.getCartCount()
                    this.$router.go(0)
                    // this.$router.replace({ name: 'blank' })
                    //  this.$toast('你取消了点赞') // 有问题
                    this.showSuccessMsg('您减少了该商品数量')
                })
            })
        }
    },
    mounted() {
        this.getRecommendListAction({
            pageNum: this.pageNum
        }),
        this.getCartList(),
        this.cartLists.forEach( item =>  {
            // this.total += item.count;
            // this.amount += item.price * item.count;
            // this.checkTotal += item.check ? item.count : 0;
            this.checkAmount += item.check ? (item.bookNumber * item.bookPrice) * 100 : 0;
        })
    },
    
}
</script>

<style lang="scss">

.w-in {
    width: 13px;
    height: 13px;
}

.w-pi {
    border: 0;
    width: 40%;
    padding: 1px 5px;
}

.van-empty  {
    padding: 0;
}

.van-empty__image {
    width: 100%;
    height: 100%;
}

.van-empty__description {
    margin: 0;
    font-size: 16px;
    color: #777;
}

.van-submit-bar__button {
     width: 2.533333rem;
}

.my-cart {
    padding-bottom: 100px;
    background-color: rgb(248, 246, 246);
    .w-all {
        margin-top: 15px;
        background-color: white;
        .w-top {
            display: flex;
            align-items: center;
            margin: 3.2vw 0 0;
            padding: 4.8vw 3.2vw 4.8vw;
            // .van-icon-checked {
            //     color: #1989fa;
            //     font-size: 22px;
            // }
            .w-book {
                font-size: 13px;
                margin-left: 2.133vw;
            }
        }
        .w-two {
             li {
                display: flex;
                flex-direction: column;
                padding: 2.133vw 4.267vw;
                .w-ye {
                    display: flex;
                    .w-zuo {
                        display: flex;
                        align-items: center;
                        // .w-in {
                        //     width: 13px;
                        //     height: 13px;
                        // }
                        .w-left {
                            height: 32vw;
                            width: 32vw;
                            padding: 0 10px;
                            margin-right: 2.133vw;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    .w-right {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        -webkit-box-flex: 1;
                            -webkit-flex: 1;
                            flex: 1;
                        .w-price {
                            color: red;
                            font-size: 13px;
                        }
                        .w-up {
                            // .w-name {
                                color: black;
                            // }
                            .w-ce {
                                display: flex;
                                justify-content: flex-end;
                                button {
                                    border: 0;
                                    width: 7.467vw;
                                    height: 7.467vw;
                                    font-size: 24px;
                                    color: #323233;
                                }
                                input {
                                    border: 0;
                                    background-color: #f2f3f5;
                                    text-align: center;
                                    margin: 0 0.533vw;
                                    width: 8.533vw;
                                    height: 7.467vw;
                                }
                            }
                        }
                    }
                }
                 .w-delete {
                    text-align: right;
                    padding-right: 4.267vw;
                    color: black;
                }
             }
        }
    }

    .w-jie {
        font-size: 13px;
        .w-bu {
            // padding: 1px 8px;
            margin-left: 7px;
            background-color: skyblue;
            border: 0;
            border-radius: 20px;
        }
    }

    .van-submit-bar {
        bottom: 46px;
    }
}
</style>